<template>
  <div class="goods">
    <div class="goods__title">
      <h2>{{ title }}</h2>
      <span @click="pathTo">See all ></span>
    </div>
    <ul>
      <GoodCard v-for="item in list" :item="item" :color="color" :key="item.id" />
    </ul>
  </div>
</template>

<script setup lang="ts">
import GoodCard from "@/components/GoodCard.vue";
import { GoodsItem } from "../index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
interface Props {
  title: string;
  list: GoodsItem[];
  color: string;
  tid: number;
}
const props = withDefaults(defineProps<Props>(), {
  title: "商品",
  list: () => [],
  color: "#000",
  tid: 0,
});
const pathTo = () => {
  router.push({ path: `/find/${props.tid}`, query: { name: '全部' } })

}
</script>

<style lang="scss">
.goods {
  margin-top: 30rem;
  height: 170rem;

  .goods__title {
    @include flex($ai: flex-start, $jc: space-between);
    color: var(--font-color);

    >span {
      font-size: 12rem;
      font-weight: 100;
      color: $color-yellow;
    }
  }

  ul {
    @include flex($ai: flex-end, $jc: space-between);
    margin-top: 42rem;
    height: 90rem;
  }

  h2 {
    font-size: 18rem;
    font-weight: 500;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
}
</style>
